<template>
  <div class="ke-apply-course">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="ruleForm.courseName"></el-input>
      </el-form-item>
      <el-form-item label="课程描述" prop="description">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>

      <el-form-item label="课程价格" prop="price">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>

      <el-form-item label="课程类型" prop="type">
        <el-select v-model="type" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程分类" prop="courseType">
        <el-select v-model="courseType" placeholder="请选择">
          <el-option
            v-for="item in courseTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="upload">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://localhost:8080/api/teacher/uploadCourse"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
        multiple
        :accept="'video/*'"
        :on-error="uploadError"
        :headers="headers"
      >
        <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
        <el-button
          style="margin-left: 10px;"
          size="medium"
          type="success"
          @click="submitUpload('ruleForm')"
        >上传到服务器</el-button>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ke-apply-course',
  data() {
    return {
      headers: {
        id: '',
        description: '',
        price: 0,
        courseName: ''
      },
      fileList: [],
      ruleForm: {
        description: '',
        price: 0,
        courseName: ''
      },
      rules: {
        courseName: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
          {
            min: 3,
            max: 100,
            message: '长度在 3 到 100 个字符',
            trigger: 'blur'
          }
        ],
        description: [
          { required: true, message: '请输入课程描述', trigger: 'blur' },
          {
            min: 3,
            max: 500,
            message: '长度在 3 到 500 个字符',
            trigger: 'blur'
          }
        ],
        price: [{ required: true, message: '价格不能为空', trigger: 'blur' }]
      },
      typeOptions: [
        {
          value: '限时体验课',
          label: '限时体验课'
        },
        {
          value: '免费课程',
          label: '免费课程'
        },
        {
          value: '精选VIP课程',
          label: '精选VIP课程'
        }
      ],
      type: '',
      courseType: '',
      courseTypeOptions: [
        {
          value: 'Vue.js',
          label: 'vue.js'
        },
        {
          value: 'react',
          label: 'react'
        },
        {
          value: 'Flutter',
          value: 'Flutter'
        },
        {
          value: 'Node.js',
          label: 'Node.js'
        },
        {
          value: 'C/C++',
          label: 'C/C++'
        },
        {
          value: 'Java',
          label: 'Java'
        },
        {
          value: 'JavaScript',
          label: 'JavaScript'
        },
        {
          value: '数据库',
          label: '数据库'
        },
        {
          value: 'Linux',
          label: 'Linux'
        }
      ]
    }
  },
  created() {
    this.id = localStorage.getItem('ke_id')
  },
  methods: {
    uploadError(err) {
      alert('upload error')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    submitUpload(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.headers.id = localStorage.getItem('ke_id')
          this.headers.courseName = encodeURIComponent(this.ruleForm.courseName)
          this.headers.price = this.ruleForm.price
          this.headers.description = encodeURIComponent(
            this.ruleForm.description
          )
          this.headers.type = encodeURIComponent(this.type)
          this.headers.courseType = encodeURIComponent(this.courseType)
          this.headers.teacherName = encodeURIComponent(`${localStorage.getItem('ke_nickName')}老师`)

          this.$refs.upload.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.ke-apply-course {
  .upload {
    width: 100%;
    text-align: center;

    /deep/.upload-demo {
      .el-upload-list {
        height: 120px;
        margin-top: 10px;
        overflow: auto;
        box-sizing: border-box;

        &::-webkit-scrollbar {
          width: 0px;
        }

        li {
          list-style: none;
          height: 40px;
          line-height: 40px;
          fong-size: 14px;
          padding-left: 20px 0 15px;
          box-sizing: border-box;
          color: #555555;
          cursor: pointer;


          &:nth-child(2n) {
            background-color: #eeeeee;
          }

          &:nth-child(2n - 1) {
            background-color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
